<template>
  <div class="login-log-container">
    <!-- 页面标题 -->
    <h1 class="page-title">登录日志管理</h1>

    <!-- 操作按钮区：添加排序切换按钮 -->
    <div class="button-container">
      <el-button @click="handleToggleSort" type="primary" :icon="isDescending ? ArrowUp : ArrowDown" size="small">
        {{ isDescending ? '查看最早' : '查看最新' }}
      </el-button>
    </div>

    <!-- 加载状态指示器 -->
    <el-loading v-if="loading" target=".login-log-container" text="数据加载中..." />

    <!-- 表格组件：展示登录日志数据 -->
    <el-table v-else :data="tableData" stripe border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <!-- 日志ID列：唯一标识，使用index作为排序依据 -->
      <el-table-column prop="loginLogId" label="日志ID" width="80" sortable />

      <!-- 用户ID列：关联用户表，便于追踪操作人 -->
      <el-table-column prop="userId" label="用户ID" width="80" sortable />

      <!-- 登录时间列：格式化显示，使用自定义格式化函数 -->
      <el-table-column label="登录时间" width="180" sortable>
        <template #default="scope">
          {{ formatDateTime(scope.row.loginTime) }}
        </template>
      </el-table-column>

      <!-- 登录IP列：显示用户登录来源IP -->
      <el-table-column prop="loginIp" label="登录IP" width="120" />

      <!-- 登录状态列：将数字状态转换为中文显示，提高可读性 -->
      <el-table-column label="登录状态" width="100" sortable>
        <template #default="scope">
          <el-tag :type="scope.row.loginStatus === 1 ? 'success' : 'danger'">
            {{ scope.row.loginStatus === 1 ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 登录方式列：显示密码/验证码等登录方式 -->
      <el-table-column prop="loginMethod" label="登录方式" width="120" />

      <!-- 设备信息列：显示用户登录设备 -->
      <el-table-column prop="deviceInfo" label="设备信息" width="180" />

      <!-- 浏览器信息列：显示用户使用的浏览器 -->
      <el-table-column prop="browserInfo" label="浏览器信息" width="180" />

      <!-- 备注列：显示登录失败原因等附加信息 -->
      <el-table-column prop="remark" label="备注" />
    </el-table>

    <!-- 分页控件：处理前端分页逻辑 -->
    <div class="pagination-container">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
// 从API入口文件导入统一的api对象，便于维护和替换
import api from '@/api';
// 导入排序图标组件
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';


// 响应式状态管理
const state = reactive({
  allLogs: [], // 存储所有日志数据，用于前端分页
  loading: true // 控制加载状态显示
});

// 分页相关状态
const currentPage = ref(1); // 当前页码
const pageSize = ref(10);   // 每页显示条数
const total = ref(0);      // 总记录数
const tableData = ref([]); // 当前页显示的数据

// 排序状态：默认为false(正序)，true表示倒序
const isDescending = ref(false);

/**
 * 格式化日期时间
 * 将ISO格式字符串转换为可读性更好的本地日期时间格式
 * @param {string} dateTimeStr - ISO格式的日期时间字符串
 * @returns {string} 格式化后的日期时间
 */
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '-';
  const date = new Date(dateTimeStr);
  // 使用toLocaleString确保日期格式符合用户本地习惯，同时手动添加秒数显示
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).replace(/\//g, '-');
};

/**
 * 切换排序方式
 * 点击按钮时切换正序/倒序状态，并重新排序数据
 */
const handleToggleSort = () => {
  isDescending.value = !isDescending.value; // 切换排序状态
  sortLogsByTime(); // 重新排序数据
  setCurrentPageData(); // 重新计算当前页数据
};

/**
 * 按时间排序日志数据
 * 根据登录时间(loginTime)字段排序，支持正序和倒序切换
 * 使用时间戳比较确保排序准确性，避免字符串比较导致的错误
 */
const sortLogsByTime = () => {
  state.allLogs.sort((a, b) => {
    const timeA = new Date(a.loginTime).getTime(); // 转换为时间戳
    const timeB = new Date(b.loginTime).getTime();
    return isDescending.value ? timeB - timeA : timeA - timeB; // 倒序/正序切换
  });
};

/**
 * 处理分页大小变化
 * 当用户选择不同每页条数时，重置当前页为1并重新计算分页
 * @param {number} val - 新的每页条数
 */
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 切换页大小时回到第一页
  setCurrentPageData();
};

/**
 * 处理当前页码变化
 * 当用户切换页码时，重新计算当前页数据
 * @param {number} val - 新的页码
 */
const handleCurrentChange = (val) => {
  currentPage.value = val;
  setCurrentPageData();
};

/**
 * 设置当前页数据
 * 根据当前页码和每页条数，从所有数据中截取对应部分
 * 前端分页实现：适用于数据量不大的情况，避免频繁请求后端
 */
const setCurrentPageData = () => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  tableData.value = state.allLogs.slice(startIndex, endIndex);
};

/**
 * 获取所有登录日志
 * 页面加载时调用后端全查接口，获取所有数据后进行前端分页
 * 使用try-catch处理网络异常，提高用户体验
 */
const fetchAllLoginLogs = async () => {
  try {
    state.loading = true;
    // 使用提取后的API方法，遵循项目统一的API调用方式
    const response = await api.sysLoginLog.getLoginLogList();

    // 修复：直接判断根层级的code字段，而非response.data.code
    // 修复：直接使用response.data作为数据数组，而非response.data.data
    if (response.code === 200 && Array.isArray(response.data)) {
      state.allLogs = response.data; // 直接使用response.data
      sortLogsByTime(); // 数据加载后先按默认排序方式排序
      total.value = state.allLogs.length;
      setCurrentPageData(); // 初始化第一页数据
    } else {
      ElMessage.error('获取日志数据失败：接口返回格式异常');
      state.allLogs = [];
      total.value = 0;
      tableData.value = [];
    }
  } catch (error) {
    // 详细错误信息有助于问题排查
    console.error('登录日志请求失败:', error);
    ElMessage.error(`获取日志数据失败：${error.message || '网络异常'}`);
    state.allLogs = [];
    total.value = 0;
    tableData.value = [];
  } finally {
    state.loading = false; // 无论成功失败，都关闭加载状态
  }
};

// 页面挂载时加载数据
onMounted(() => {
  fetchAllLoginLogs();
});
</script>

<style scoped>
/* 页面容器样式 */
.login-log-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 按钮容器样式：靠右对齐，与表格保持间距 */
.button-container {
  margin-bottom: 16px;
  text-align: right;
}

/* 页面标题样式 */
.page-title {
  color: #333;
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>